<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <style type="text/css">
        .shadow_css {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 10;
            /* 为mozilla firefox 设置透明度  */
            -moz-opacity: 0.6;
            /* 设置透明度 */
            opacity: .60;
            /* 为IE 设置透明度  */
            filter: alpha(opacity=66);
        }

        .window_css {
            display: none;
            position: absolute;
            top: 20%;
            left: 25%;
            width: 50%;
            height: 60%;
            border: 3px solid honeydew;
            background-color: aliceblue;
            z-index: 11;
        }
        </style>
    <script>
        /*当点击调用此方法后,将悬浮窗口显示出来,背景变暗*/
        function displayWindow() {
            /*悬浮窗口的显示,需要将display变成block*/
            document.getElementById("window").style.display = "block";
            /*将背景变暗*/
            document.getElementById("shadow").style.display = "block";
        }

        /*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
        function hideWindow() {
            document.getElementById("window").style.display = "none";
            document.getElementById("shadow").style.display = "none";
        }
    </script>


</head>
<body>
        <!--用来引出悬浮窗口的div-->
        <div>
            <a href="javascript:void(0)" onclick="displayWindow()">
                点击显示悬浮窗口
            </a>
        </div>
        <!--悬浮窗口-->
        <div id="window" class="window_css">
            <a href="javascript:void(0)" onclick="hideWindow()">
                关闭悬浮窗口
            </a>

        </div>
        <!--出现悬浮窗口后,背景变暗-->
        <div id="shadow" class="shadow_css">

        </div>
</body>

</html>